import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {formatMobile} from '../../utils/commons';
import { Form, Input, Select, Button, InputNumber, Modal } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const R=require("ramda");
import moment from 'moment';
const dateFormat = 'YYYY-MM-DD';

const productCodeDetail = Form.create()(class ProductCodeDetail extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                open: false
            }
        }

        handleOpen= () => {
            this.setState({ open: true });
        }


        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleConfirm = () =>{
            this.props.form.validateFields((errors, values) => {
                if (errors) return; 
                values.id = this.props.customsProductCode.dataSource && this.props.customsProductCode.dataSource.id ? this.props.customsProductCode.dataSource.id : null;
                if(!R.equals(R.pick(Object.keys(values),this.props.customsProductCode.dataSource),values)){
                    this.props.dispatch({
                        type: R.isNil(values.id) ? 'customsProductCode/addHscode' : 'customsProductCode/updateHscode',
                        payload:{
                            ...values,
                            onSuccess:() =>{
                                this.handleCancel();
                                if(this.props.refreshList) this.props.refreshList();
                            }
                        }
                    })
                }
            });
        }

    render(){
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 14 } };
        let dataSource = this.props.customsProductCode.dataSource ? this.props.customsProductCode.dataSource : {};

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];        

        return(
            <Modal  maskClosable={false} visible={this.state.open} width={520} title={"创建海关商品码"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="海关商品码"
                        hasFeedback
                    >
                        {getFieldDecorator('hscode', {
                            rules: [{
                                required: true, message: '请输入海关商品码！',
                            }],
                            initialValue: dataSource.hscode
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="税局商品码"
                        hasFeedback
                    >
                        {getFieldDecorator('taxcode', {
                            rules: [{
                                required: true, message: '请输入税局商品码',
                            }],
                            initialValue: dataSource.taxcode
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="商品名称"
                        hasFeedback
                    >
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, message: '请输入商品名称',
                            }],
                            initialValue: dataSource.name
                        })(
                            <Input maxLength="255"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="法定单位1"
                        hasFeedback
                    >
                        {getFieldDecorator('unit1', {
                            rules: [{
                                required: true, message: '请输入法定单位1',
                            }],
                            initialValue: dataSource.unit1
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="法定单位2"
                        hasFeedback
                    >
                        {getFieldDecorator('unit2', {
                            rules: [{
                                required: false, message: '请输入法定单位2',
                            }],
                            initialValue: dataSource.unit2
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="增值税率(%)"
                        hasFeedback
                    >
                        {getFieldDecorator('zzrate', {
                            rules: [{
                                required: true, message: '请输入增值税率',
                            }],
                            initialValue: dataSource.zzrate
                        })(
                            <InputNumber maxLength="18"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="消费税率(%)"
                        hasFeedback
                    >
                        {getFieldDecorator('xfrate', {
                            rules: [{
                                required: true, message: '请输入消费税率',
                            }],
                            initialValue: dataSource.xfrate
                        })(
                            <InputNumber maxLength="18"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="退税率(%)"
                        hasFeedback
                    >
                        {getFieldDecorator('taxrate', {
                            rules: [{
                                required: true, message: '请输入退税率',
                            }],
                            initialValue: dataSource.taxrate
                        })(
                            <InputNumber maxLength="18"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="监管条件"
                        hasFeedback
                    >
                        {getFieldDecorator('supercondition', {
                            rules: [{
                                required: true, message: '请输入监管条件',
                            }],
                            initialValue: dataSource.supercondition
                        })(
                            <Input maxLength="50"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="申报要素"
                        hasFeedback
                    >
                        {getFieldDecorator('declarelements', {
                            rules: [{
                                required: true, message: '请输入申报要素',
                            }],
                            initialValue: dataSource.declarelements
                        })(
                            <Input maxLength="255"/>
                        )}
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="备注"
                        hasFeedback
                    >
                        {getFieldDecorator('memo', {
                            rules: [{
                                required: false, message: '请输入备注',
                            }],
                            initialValue: dataSource.memo
                        })(
                            <Input maxLength="255"/>
                        )}
                    </FormItem>
                </Form>
            </Modal>
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.customsProductCode, customsProductCode: state.customsProductCode
    };
}

export default connect(mapStateToProps)(productCodeDetail);